<template>
  <div style="height: 100%">
    <div class="shop-detail">
      <div class="detail">
        <!-- 轮播图 -->
        <div class="detail-swiper">
          <swiper
            class="swiper"
            :current="active"
            :circular="true"
            @change="changeSwiper"
          >
            <swiper-item
              v-for="(item, index) in goodsInfo.rotationImageList"
              :key="index"
            >
              <image mode="aspectFill" class="swiper-image" :src="item" />
            </swiper-item>
          </swiper>
          <div class="dot-index">
            {{ active + 1 }}/{{ dotLen }}
          </div>
        </div>
        <!-- 标题 -->
        <div class="detail-content">
          <div class="money">
            <div class="now-money" v-if="goodsInfo.originalPrice"><text>￥</text>{{goodsInfo.originalPrice}}</div>
            <div class="pre-money">
              ￥{{ goodsInfo.salesPrice }} 会员价
            </div>
          </div>
          <div class="title">
            {{ goodsInfo.productName }}
          </div>
        </div>
        <!-- 规格 服务 -->
        <div class="ggfw">
          <div class="li" @click="showSku">
            <span>规格</span>
            <span>{{skuList || '请选择商品规格'}}</span>
            <span>
              <u-icon name="arrow-right" color="#8C9398" size="28"></u-icon>
            </span>
          </div>
          <div class="li">
            <span>服务</span>
            <span>正品保障 · 免运费 · 售后服务</span>
            <span></span>
          </div>
        </div>
        <!-- 详情 -->
        <div class="detail-images">
          <div class="imgg">
            <image
              class="img"
              v-for="(item, index) in goodsInfo.pic"
              :key="index"
              mode="widthFix"
              :src="item"
            />
          </div>
          <u-divider>没有更多了</u-divider>
        </div>
      </div>
      <div class="bottom">
        <div class="cart">
          <image
            mode="aspectFill"
            class="shopping-cart"
            :src="shoppingCart"
            @click="goGouWuCart"
          ></image>
          <!-- <u-badge
            type="error"
            count="7"
            :absolute="true"
            :offset="[0, 0]"
          ></u-badge> -->
        </div>
        <div class="right">
          <u-button
            size="medium"
            :customStyle="customStyleaa1"
            :hair-line="false"
            @click="showSku(1)"
            >加入购物车</u-button
          >
          <u-button
            size="medium"
            :customStyle="customStyle1"
            :hair-line="false"
            @click="showSku(2)"
            >立即购买</u-button
          >
        </div>
      </div>
    </div>

    <!-- 弹出框Sku -->
    <u-popup :show="showSkuModal" mode="bottom" :round="16" @close="close">
      <sku-modal v-if="showSkuModal" :productSpecsList="goodsInfo.productSpecsList" :num="num" @goOrder="goOrder"></sku-modal>
    </u-popup>
  </div>
</template>

<script>
import auth from '../../api/auth'
import SkuModal from '../../components/SkuModal.vue'

export default {
  components: { SkuModal },
  data() {
    return {
      active: 0,
      dotLen:0,
      num: null,
      showSkuModal: false,
      shoppingCart: require('../../static/shopping-cart.png'),
      customStyle1: {
        background: '#FC6420',
        color: '#fff',
        padding: '22rpx',
        border: 0,
      },
      customStyleaa1: {
        background: '#F5F7F9',
        color: '#333',
        marginRight: '16rpx',
        padding: '22rpx',
        border: 0,
      },
      goodsInfo: {
        pic: [],
      },
      skuList:'',
    }
  },
  onLoad(option) {
    this.productGetOne(option.spuCode.trim())
  },
  methods: {
    /**
     * 获取详情数据
     */
    async productGetOne(spuCode) {
      let res = await auth.productGetOne({spuCode})
      this.goodsInfo = res
      if(!res.rotationImageList) {
        this.goodsInfo.rotationImageList = [res.coverImage]
        this.dotLen = this.goodsInfo.rotationImageList.length
      }
      this.goodsInfo['pic'] = res.pic.split(',')
      // console.log(res)
    },
    close() {
      this.showSkuModal = false
    },
    changeSwiper(e) {
      this.active = e.detail.current
    },
    showSku(num) {
      this.num = num
      this.showSkuModal = true
    },
    async goOrder(obj) {
			this.showSkuModal =  false
			obj.skuObj.productId = this.goodsInfo.id
			console.log(obj)
			/**
			 * obj.type=1加入购物车
			 * 参数
			 * {
			 * "productAmount": 0,
					"productId": 0,
					"productSkuId": 0,
			 * }

			 obj.type=2商品详情页立即购买
			 进入提交商品订单页面source 订单创建来源，1：商品详情页，2：购物车列表

			 向下个页面传值
			 "productAmount": 0,
				"productId": 0,
				"productSkuId": 0,
				"source": 1,

				obj.type=3修改购物车中的商品数量
				参数
				{
					"productAmount": 0,
					"productSkuId": 0
				}
			 * 
			 * */ 
			switch (obj.type) {
				case 1:
					await auth.addOderCart(obj.skuObj)
          uni.showToast({title:'添加成功，在购物车等亲！'})
				break;
				case 2:
					uni.navigateTo({
						url: `/pages/GouWuChe/jieSuan?totalMoney=${obj.totalMoney}&skuObj=${JSON.stringify(obj.skuObj)}&source=1`
					})
				break;
				// case 3:
				// 	delete obj.skuObj.productId
				// 	await auth.changeCartNum(obj.skuObj)
			}

// 			{
//   "buyerRemarks": "",
//   "cardIds": [],
//   "offlinePayTime": "",
//   "payPic": "",
//   "payerName": "",
//   "userAddressId": 0
// }
			// 拿到要购买的商品信息和type
		},
    goGouWuCart(){
      uni.switchTab({
        url: `/pages/GouWuChe/index`
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.shop-detail {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f0f0f0;
  .detail {
    flex: 1;
    overflow: auto;
    .detail-swiper {
      height: 750rpx;
      position: relative;
      .swiper {
        height: 100%;
        overflow: hidden;
        background: #f8f8f8;
        .swiper-image {
          width: 100%;
          height: 100%;
        }
      }
      .dot-index {
        position: absolute;
        right: 40rpx;
        bottom: 30rpx;
        width: 70rpx;
        height: 40rpx;
        line-height: 40rpx;
        font-size: 22rpx;
        color: #fff;
        text-align: center;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 28rpx;
      }
    }
    .detail-content {
      background: #fff;
      padding: 32rpx;
      margin-bottom: 12rpx;
      .money {
        display: flex;
        align-items: flex-end;
        margin-bottom: 16rpx;
        .now-money {
          // text-decoration: line-through;
          color: #fc3d1c;
          font-size: 48rpx;
          line-height: 24rpx;
          font-weight: 500;
          margin-right: 16rpx;
          text {
            text-decoration: none;
            font-size: 26rpx;
          }
        }
        .pre-money {
          color: #84532a;
          font-size: 20rpx;
          padding: 0rpx 20rpx;
          background: linear-gradient(153deg, #f6efe5 0%, #fdebdb 100%);
          border-radius: 4rpx;
        }
      }
      .title {
        font-size: 32rpx;
        font-weight: 500;
      }
    }
    .ggfw {
      background: #fff;
      margin-bottom: 16rpx;
      .li {
        font-size: 26rpx;
        line-height: 88rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e8e9ea;
        &:last-child {
          border-bottom: 0;
        }
        span:first-child {
          width: 134rpx;
          color: #8c9398;
          text-align: center;
        }
        span:nth-child(2) {
          color: #333;
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        span:last-child {
          width: 40rpx;
          height: 40rpx;
          margin: 0 32rpx;
        }
      }
    }
    .detail-images {
      font-size: 0;
      background: #fff;
      .name {
        font-size: 28rpx;
        font-weight: 500;
        padding: 24rpx 32rpx;
      }
      .img {
        width: 100%;
      }
      .imgg {
        margin-bottom: 20rpx;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 128rpx;
    display: flex;
    justify-content: space-between;
    padding: 24rpx 32rpx;
    background: #fff;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
    .cart {
      float: left;
      position: relative;
      width: 56rpx;
      height: 56rpx;
      margin-right: 32rpx;
    }
    .shopping-cart {
      width: 100%;
      height: 100%;
    }
    .right {
      flex: 1;
      display: flex;
    }
    .button {
      width: 230rpx;
      height: 80rpx;
      line-height: 80rpx;
      color: #fff;
      font-size: 28rpx;
      background: linear-gradient(135deg, #fd7289 0%, #fd6585 100%);
      border-radius: 40rpx;
    }
  }
}
</style>
